<template>
  <div id="root" class="rs-root-reveal">
    <div class="rf-pdp as-l-container row">
      <div class="column large-4 small-12 left">
        <span class="violator-frameless rf-pdp-violator"> 免费镌刻服务 </span>
        <h1 class="rf-pdp-title">AirPods (第二代)</h1>
        <!-- 这里面是放金额 -->
      <div class="rf-pdp-prices">
         <div class="rc-prices rc-prices-lead-with-monthly-price">
           <div class="rc-price">
             <div class="rc-prices-currentprice">
               <span class="rc-prices-fullprice">
                 RMB 999
               </span>
             </div>
           </div>
         </div>
      </div>
      <div class="fristLine"></div>
        <div class="rf-engraving">
          <div class="rf-engraving-nonbundle row">
            <!-- 保存之后从这里开始不展示 -->
            <div class="engraving-head" id="engraving-head" v-show="HiddenConserve">
            <div class="column large-12 small-12 rf-engraving-headline">
              <!-- 这里是图标 -->
              <span class="rf-engraving-iconcontainer">
               <svg t="1664174362904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6758" width="23" height="23"><path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32zM320 624h384v32H320v-32z m0-128h384v32H320v-32z m0-128h384v32H320v-32z" p-id="6759" fill="#8a8a8a"></path></svg>
              </span>
              <button class="as-buttonlink">
                <!-- 点击之后进行传值方便下面进行判定 -->
                <span class="Spancolor" @click="ShowContext">免费个性化服务</span>
              </button>
            </div>
            <div class="column large-12 small-12">
              <div id="engraving-footer-app" class="rf-engraving-footer">表情符号、名字、缩写和数字混合镌刻，打造你独一无二的专属 AirPods  Apple 独家福利。</div>
            </div>
            </div>
            <!-- 点击保存按钮之后展示数据 -->
            <div class="headline" id="headline" v-show="ShowConserve">
            <Hidepage/>
            </div>
            <!-- 保存之后展示值 -->
            <ContextScoend/>
        </div>
      </div>
      </div>
      <div class="column large-7 large-offset-1 small-12 small-offset-0 right"></div>
    </div>
    <div class="HideFrist">
       <div class=""></div>
    </div>
  </div>
</template>
  
<script>
import ContextScoend from './ContextScoend.vue';
import {mapState} from 'Vuex'
import bus from '../../../../../bus/index'
import Hidepage from './Hidepage.vue';
export default {
  data() {
    return {
      scrollFix:'',
      Changefix:true,
      ShowConserve:false,
      HiddenConserve:true,
      CloneFrist:'Frist',
    }
  },
  computed:{
    // 导入数据
    ...mapState(['HideContext'])
  },
  methods: {
    // 获取当前滑轮的值
    Getscroll(){
      var scrollTop =document.body.scrollTop || document.documentElement.scrollTop

      if (scrollTop>=400) {
   // 滑轮的最大值不能超过400
        this.scrollFix=400
      }else if (scrollTop<400) {
        this.scrollFix=scrollTop
      }
    },
    ShowContext(){
      // 点击数据之后获取hideFrist数据
      bus.$emit('get-function',this.HideContext,this.scrollFix,)
      // 移除监听函数
      window.addEventListener('scroll',this.Getscroll,)
      // 传递数据给app
      bus.$emit('Changefix',this.Changefix,this.scrollFix)
    },
  },
  created() {
    // 启动事件监听函数
    const that =this
    window.addEventListener('scroll',this.Getscroll)
    // 接收数据
    bus.$on('scorll',(data)=>{
      if (data=true) {
        // 再次启用事件监听
        window.addEventListener('scroll',this.Getscroll)
      }
    })
    // 接收third的数据
    bus.$on('preserve',(data)=>{
      // 输入框中存在数据，展示样式
      if (data==true) {
      that.ShowConserve=data
      that.HiddenConserve=false
      }else{
         that.ShowConserve=data
         that.HiddenConserve=true
      }
      
    })
  },
  components: { ContextScoend, Hidepage,  },};
</script>

<style lang="less" scoped>
.rs-root-reveal {
  width: 100%;
  .rf-pdp {
    width: 980px;
    height: 648px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .column {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      min-width: 0;
      .rf-engraving-footer{
        padding-left: 33px;
        height: 42px !important;
        font-size: 10px;
        padding-top: 10px;
        color: #5b5b5c;
      }
    }
    .large-4 {
      width: 327px;
      .rf-pdp-violator {
        text-align: left;
        font-size: 15px;
        font-weight: 500;
        padding-bottom: 4px;
        box-sizing: border-box;
        white-space: nowrap;
        display: block;
        color: #bf4800;
      }

      h1{
        width: 100%;
        text-align: left;
      }
      // .fristLine{
      //   margin-top: 15px;
      //   width: 100%;
      //   height: 0.5px;
      //   background-color: #d2d2d7;
      // }
      .rf-engraving{
        
        width:100% ;
        height: 121px;
        .rf-engraving-nonbundle{
          text-align: left;
          width: 100%;
          height: 100%;
          padding-top: 20px;
          padding-bottom: 33px;
          border-top: 1px solid #d2d2d7;
          margin-top: 20px;
          .large-12{
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            .rf-engraving-iconcontainer{
              height: 25px;
              width: 25px !important;
              margin-right: 8px;
            }
            .as-buttonlink{
              height: 35px;
              width: 106px;
              border: none;
              color: #06c;
              background-color: #ffffff;
              
              font-size: 15px;
              font-weight: 600px;
              .Spancolor{
                cursor: pointer;
              }
              .Spancolor:hover{
                color: black;
              }
            }
          }
        }
      }
      .rf-pdp-prices{
        width: 100%;
        margin-top: 13.6px;
        .rc-prices-lead-with-monthly-price{
          width: 100%;
          padding-bottom: 10px;
         .rc-price{
           width: 100%;
           height: 25px;
           .rc-prices-currentprice{
             width: 100%;
             height: 100%;
             text-align: left;
             font-size: 17px;
             font-weight: 400;
           }
         }
        }
      }
    }
  }
  .HideFrist{
    height: 1000px;
    width: 800px;
    position: absolute;
  }
}
</style>